import React, { useState, useEffect } from 'react';
import { useRequest, useUpdate } from 'ahooks';
import { apiSystemSettings } from '@/api/config.api';
import { PageLoading } from '@ant-design/pro-layout';
import {
  Card,
  Form,
  Input,
  Checkbox,
  Radio,
  Button,
  message,
  Affix,
  Select,
} from 'antd';
import style from './style.module.less';
import KPageHeader from '@/components/KPageHeader';
import { RandomStr } from '@/utils/random';

export default () => {
  const [form] = Form.useForm();
  const { data, loading } = useRequest(apiSystemSettings.getData);
  const { run: submitRequest, loading: subIng } = useRequest(
    apiSystemSettings.save,
    {
      manual: true,
      onSuccess: () => {
        message.success('保存成功');
      },
    },
  );

  // 随机生成
  const onClickRand = () => {
    form.setFieldsValue({
      wechat: {
        token: RandomStr(32, { symbol: false, number: true, upper: true }),
      },
    });
  };

  return loading ? (
    <PageLoading />
  ) : (
    <>
      <KPageHeader title={'站点配置'} showBack={false} />
      <Form
        form={form}
        layout={'vertical'}
        initialValues={data}
        onFinish={submitRequest}
      >
        <Card title={'基础配置'}>
          <Form.Item
            label={'网站标题'}
            name={['basic', 'title']}
            required={true}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label={'ICP备案号'}
            name={['basic', 'icp']}
            required={true}
          >
            <Input />
          </Form.Item>
        </Card>

        <Card title={'公众号'} style={{ marginTop: 15 }}>
          <Form.Item label={'APPID'} name={['wechat', 'appid']} required={true}>
            <Input />
          </Form.Item>

          <Form.Item
            label={'SECRET'}
            name={['wechat', 'secret']}
            required={true}
          >
            <Input />
          </Form.Item>

          <Form.Item label={'Token'} name={['wechat', 'token']} required={true}>
            <Input.Group compact={true}>
              <Form.Item noStyle={true} name={['wechat', 'token']}>
                <Input style={{ width: '300px' }} />
              </Form.Item>
              <Button onClick={onClickRand}>随机生成</Button>
            </Input.Group>
          </Form.Item>

          <Form.Item
            label={'Aes_Key'}
            help={'如果使用安全模式则必须填写此项'}
            name={['wechat', 'aes_key']}
          >
            <Input />
          </Form.Item>
        </Card>

        <Affix offsetBottom={30}>
          <Form.Item className={style.bottom}>
            <Button type={'primary'} loading={subIng} htmlType={'submit'}>
              提交
            </Button>
          </Form.Item>
        </Affix>
      </Form>
    </>
  );
};
